import React from 'react';
import { Skeleton } from 'antd';

const TableSkeleton = () => {
  return (
    <div style={{ padding: '0.5rem' }}>
      {[1, 2, 3].map((item) => (
        <div key={item} style={{
          display: 'flex',
          padding: '1rem',
          margin: '0.5rem 0',
          background: '#fafafa',
          borderRadius: '0.2rem',
          alignItems: 'center'
        }}>
          {/* 内容/标题列 */}
          <div style={{ width: '30%', display: 'flex', alignItems: 'center' }}>
            <Skeleton.Image 
              active 
              style={{
                width: '2rem',
                height: '2rem',
                borderRadius: '0.2rem',
                marginRight: '1rem'
              }}
            />
            <Skeleton.Input active style={{ width: '70%' }} />
          </div>

          {/* 标签/数量列 */}
          <div style={{ width: '15%', display: 'flex', justifyContent: 'center', gap: '0.5rem' }}>
            <div style={{ background: '#f0f0f0', padding: '0.3rem', borderRadius: '0.2rem' }}>
              <Skeleton.Input active style={{ width: '3rem' }} />
            </div>
          </div>

          {/* 数据列（浏览/点赞/分享等） */}
          <div style={{ width: '35%', display: 'flex', justifyContent: 'space-around' }}>
            {[1, 2, 3, 4].map((i) => (
              <Skeleton.Input 
                key={i} 
                active 
                style={{ width: '3rem' }} 
              />
            ))}
          </div>

          {/* 更新信息列 */}
          <div style={{ width: '15%', textAlign: 'center' }}>
            <Skeleton.Input active style={{ width: '4rem' }} />
          </div>

          {/* 操作列 */}
          <div style={{ width: '5%', display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
            <Skeleton.Button active style={{ width: '2.5rem' }} />
          </div>
        </div>
      ))}
    </div>
  );
};

export default TableSkeleton; 